import Taro from '@tarojs/taro';
import {Image, View} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {request, unite} from '../../../utils/index';
import head from "../../../asset/images/head.png";
import './trainOrder.scss';
import daijx from "../../../asset/myImages/daijx.png";
import yijs from "../../../asset/myImages/yijs.png";
import None from "../../../asset/images/none.png";

class MyCoupon extends Taro.Component {
    config = {
        navigationBarTitleText: '订单页',
        navigationBarBackgroundColor: '#F6F7F7',
    };

    state = {
        dataWrap: [],
        dataList: [],
    };

    componentDidMount() {
        this.init();
        this.trainList(); //请求我的订单列表
    }

    init = () => {
        const option = this.$router.params;
        console.log(option);
        if (option.type == 1) { //教室
            const params = {
                url: '/wx/room/roomDispachClassOrderInfoCount',
                data:{}
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        if (res && res.data) {
                            this.setState({
                                dataWrap: res.data
                            })
                        }
                    }
                }
            })
        } else { //教练
            const params = {
                url: '/wx/coach/myDispatchInfo',
                data:{}
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        if (res && res.data) {
                            this.setState({
                                dataWrap: res.data
                            })
                        }
                    }
                }
            })
        }
    };

    //请求我的订单列表
    trainList = () => {
        const option = this.$router.params;
        if (option.type == 1) { //教室
            const params = {
                url: '/wx/room/roomDispachClassOrderInfo',
                data:{
                }
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        if (res && res.data) {
                            this.setState({
                                dataList: res.data
                            })
                        }
                    }
                }
            })
        } else { //教练
            const params = {
                url: '/wx/coach/myDispachClassOrderInfo',
                data:{
                }
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        if (res && res.data) {
                            this.setState({
                                dataList: res.data
                            })
                        }
                    }
                }
            })
        }
    };

    skipDetailOrder = (orderId, realOrder) => {
        const option = this.$router.params;
        if (realOrder == 'Y') {
            Taro.navigateTo({url: '../order-detail-next/orderDetailNext?id='+orderId+'&type=' + option.type})
        } else {
            unite.showToast('暂无详情页');
        }
    };

    //跳转地图
    goToMap = (roomName, address, latitude, longitude, e) => {
        e.stopPropagation(); //防止父级点击事件干扰
        if (latitude) {
            Taro.openLocation({
                latitude: Number(latitude),
                longitude: Number(longitude),
                name: roomName,
                address: address
            })
        } else {
            unite.showToast('该店铺暂无经纬度');
        }
    };

    render() {
        const {dataWrap, dataList} = this.state;
        const option = this.$router.params;
        return (
            <View className="myPage">
                <View className="order-content-wrap">
                    <View className="order-bt-wrap flex-l" style="margin-top: 0;">
                        <View className="order-heng"></View>
                        <View>我的数据</View>
                    </View>
                    <View className="order-top flex-lr">
                        <View className="text-wrap">
                            <View className="money">{dataWrap.totalClassCnt}</View>
                            <View>累计排课量</View>
                        </View>
                        <View className="order-fgx"></View>
                        <View className="text-wrap">
                            <View className="money">{dataWrap.totalClassHour}</View>
                            <View>累计课时量</View>
                        </View>
                        <View className="order-fgx"></View>
                        <View className="text-wrap">
                            <View className="money">{dataWrap.totalIncome}</View>
                            <View>累计收入</View>
                        </View>
                    </View>
                    <View className="order-top order-top1 flex-lr">
                        <View className="text-wrap">
                            <View className="money">{dataWrap.classCnt}</View>
                            <View>今日排课量(节)</View>
                        </View>
                        <View className="order-fgx"></View>
                        <View className="text-wrap">
                            <View className="money">{dataWrap.classHour}</View>
                            <View>今日课时量</View>
                        </View>
                        <View className="order-fgx"></View>
                        <View className="text-wrap">
                            <View className="money">{dataWrap.income}</View>
                            <View>今日收入</View>
                        </View>
                    </View>
                    <View className="order-bt-wrap flex-l">
                        <View className="order-heng"></View>
                        <View>我的订单</View>
                    </View>
                    {dataList.map((item, index) => (
                        <View className="list-wrap" key={index}>
                            <View className="list-top flex-lr">
                                <View className="shop-name">{item.resRoom.roomName}</View>
                                <View className="flex-r" onClick={this.goToMap.bind(this, item.resRoom.roomName,item.resRoom.address,item.resRoom.latitude, item.resRoom.longitude)}>
                                    <View>查看地图</View>
                                    <View className="arrow"></View>
                                </View>
                            </View>
                            {item.orderInfos.map((value, is) => (
                                <View className="goods-list flex-top" key={is} onClick={this.skipDetailOrder.bind(this, value.orderId, value.realOrder)}>
                                    <Image className="goods-img" src={value.avatar}/>
                                    <View className="goods-detail">
                                        <View className="goods-name text-overflow">{value.className}</View>
                                        <View className="flex-l">
                                            <View className="goods-time">{value.classBeginTime +'-'+ value.classEndTime}</View>
                                            {/*<View>¥256/节</View>*/}
                                        </View>
                                        <View className="flex-l text-overflow">
                                            <View className="goods-gg flex-center">{value.classScaleName}</View>
                                            {value.labelNames.map((items, indexs) => (
                                                <View className="gg-item flex-center" key={indexs}>{items}</View>
                                            ))}
                                        </View>
                                    </View>
                                    {value.orderState == 2 &&(
                                        <Image mode="widthFix" className="goods-status" src={daijx}/>
                                    )}
                                    {value.orderState == 3 &&(
                                        <Image mode="widthFix" className="goods-status" src={yijs}/>
                                    )}
                                </View>
                            ))}
                        </View>
                    ))}
                    {dataList.length == 0 &&(
                        <View className="none-wrap-page">
                            <Image className="none-img" src={None}/>
                            <View>暂无订单</View>
                        </View>
                    )}
                </View>
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {} = state;
    return {
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(MyCoupon);



